<div class="main-content">
    <!-- 切换台页面 -->
    <div style="margin: 20px 0 0 -1150px; height: 50px;">
        <img alt="" id="logo" src="image/logo_u.png" style="height: 50px;">
    </div>
    <div class="main-container" id="main-box">
        <div class="main-box">
            <div style="">
                <div style="display: flex; flex-direction: row; justify-content: left; margin-top: 0;">
                    <div style="width: 55%;">
                        <fieldset
                                style="border-radius:10px; border: 2px solid var(--frame-color); padding: 0 10px 10px 10px; color: var(--frame-color); font-weight: bold;">
                            <legend style="width:20%;">Up Stream</legend>
                            <div style="display: flex; flex-direction: row; justify-content: space-between;">
                                <div style="width:100%; display: flex; flex-direction: column; justify-content: center;">
                                    <div class="form-row">
                                        <div class="" style="margin-top: 40px;">
                                            Address 1:
                                        </div>
                                        <div class="col-md-7">
                                            <label for="stream-1-server">Server Address</label>
                                            <input class="form-control" id="stream-1-server" type="text">
                                        </div>
                                        <div class="col-md-3">
                                            <label for="stream-1-key">Stream Key</label>
                                            <input class="form-control" id="stream-1-key" type="text">
                                        </div>
                                    </div>
                                    <div class="form-row" style="margin-top: 10px;">
                                        <div class="" style="margin-top: 10px;">
                                            Address 2:
                                        </div>
                                        <div class="col-md-7">
                                            <label class="sr-only" for="stream-1-server">Server Address</label>
                                            <input class="form-control" id="stream-2-server" type="text">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="sr-only" for="stream-1-key">Stream Key</label>
                                            <input class="form-control" id="stream-2-key" type="text">
                                        </div>
                                    </div>
                                    <div class="form-row" style="margin-top: 10px;">
                                        <div class="" style="margin-top: 10px;">
                                            Address 3:
                                        </div>
                                        <div class="col-md-7">
                                            <label class="sr-only" for="stream-1-server">Server Address</label>
                                            <input class="form-control" id="stream-3-server" type="text">
                                        </div>
                                        <div class="col-md-3">
                                            <label class="sr-only" for="stream-1-key">Stream Key</label>
                                            <input class="form-control" id="stream-3-key" type="text">
                                        </div>
                                    </div>
                                </div>
                                <div class="" style="margin-top: 80px;">
                                    <button class="button-100-round" data-locale="module_key_chroma" id="stream-2"
                                            style="margin: 0;">SAVE
                                    </button>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                    <div style="width: 36%; margin: 0 0 0 100px;">
                        <fieldset
                                style="border-radius:10px; border: 2px solid var(--frame-color); padding: 0 0 15px 10px; color: var(--frame-color); font-weight: bold;">
                            <legend style="width:20%;">Media</legend>
                            <div class="main-sub-box" style="margin-bottom: 10px;">
                                <button class="button-100-round" data-locale="module_key_chroma" id="rec">REC</button>
                                <button class="button-100-round" data-locale="module_key_chroma"
                                        id="stream">STREAM
                                </button>
                                <button class="button-100-round" data-locale="module_key_chroma" id="last"><</button>
                                <button class="button-100-round" data-locale="module_key_luma" id="play">PLAY</button>
                                <button class="button-100-round" data-locale="module_key_scene" id="next">></button>
                            </div>
                            <div class="main-sub-box">
                                <button class="button-100-round" id="udisk-space" style="width: 50%;">USB Disk: 0G/0G
                                </button>
                                <button class="button-100-round" id="sdcard-space" style="width: 50%;">
                                    SD Card: 0G/0G
                                </button>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
            <div style="">
                <div style="display: flex; flex-direction: row; justify-content: left; margin-top: 10px;">
                    <div style="width: 55%;">
                        <fieldset
                                style="border-radius:10px; border: 2px solid var(--frame-color); padding: 0 0 10px 15px; color: var(--frame-color); font-weight: bold;">
                            <legend style="width:25%;">Pull Stream</legend>
                            <!--                        <div>Pull Stream</div>-->
                            <div style="display: flex; flex-direction: row; justify-content: space-between;">
                                <ul class="list-group list-group-flush" style="width: 85%;">
                                    <li class="list-group-item" style="padding: 0;">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon1">1</span>
                                            </div>
                                            <input aria-describedby="basic-addon1" aria-label="Username"
                                                   class="form-control"
                                                   id="pull-stream-1" placeholder="null" type="text">
                                        </div>
                                    </li>
                                    <li class="list-group-item" style="padding: 0;">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon2">2</span>
                                            </div>
                                            <input aria-describedby="basic-addon2" aria-label="Username"
                                                   class="form-control"
                                                   id="pull-stream-2" placeholder="null" type="text">
                                        </div>
                                    </li>
                                    <li class="list-group-item" style="padding: 0;">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon3">3</span>
                                            </div>
                                            <input aria-describedby="basic-addon3" aria-label="Username"
                                                   class="form-control"
                                                   id="pull-stream-3" placeholder="null" type="text">
                                        </div>
                                    </li>
                                    <li class="list-group-item" style="padding: 0;">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon4">4</span>
                                            </div>
                                            <input aria-describedby="basic-addon4" aria-label="Username"
                                                   class="form-control"
                                                   id="pull-stream-4" placeholder="null" type="text">
                                        </div>
                                    </li>
                                    <li class="list-group-item" style="padding: 0;">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon5">5</span>
                                            </div>
                                            <input aria-describedby="basic-addon5" aria-label="Username"
                                                   class="form-control"
                                                   id="pull-stream-5" placeholder="null" type="text">
                                        </div>
                                    </li>
                                    <li class="list-group-item" style="padding: 0;">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="basic-addon6">6</span>
                                            </div>
                                            <input aria-describedby="basic-addon6" aria-label="Username"
                                                   class="form-control"
                                                   id="pull-stream-6" placeholder="null" type="text">
                                        </div>
                                    </li>
                                </ul>
                                <button class="button-100-round align-self-center" data-locale="module_key_chroma"
                                        id="pull-stream-save"
                                        style="margin-right: 10px;">SAVE
                                </button>
                            </div>
                        </fieldset>
                    </div>
                    <div style="width: 36%; margin-left: 100px;">
                        <fieldset
                                style="border-radius:10px; border: 2px solid var(--frame-color); padding: 0 10px 10px 10px; color: var(--frame-color); font-weight: bold;">
                            <legend style="width:80%;">Customized Channels name</legend>
                            <!--                        <div>Customized Channels name</div>-->
                            <div style="display: flex; flex-direction: row; justify-content: left; margin-top: 30px;">
                                <div style="">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item" style="padding: 0;">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">PVW</span>
                                                </div>
                                                <input class="form-control" id="umd_pvw" pattern="[a-zA-Z0-9]{1,6}"
                                                       placeholder="PVW" style=""
                                                       type="text">
                                            </div>
                                        </li>
                                        <li class="list-group-item" style="padding: 0;">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">PGM</span>
                                                </div>
                                                <input class="form-control" id="umd_pgm" placeholder="PGM" style=""
                                                       type="text">
                                            </div>
                                        </li>
                                        <li class="list-group-item" style="padding: 0;">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">&nbsp;IN1&nbsp;</span>
                                                </div>
                                                <input class="form-control" id="umd_in1" placeholder="IN1" style=""
                                                       type="text">
                                            </div>
                                        </li>
                                        <li class="list-group-item" style="padding: 0;">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">&nbsp;IN2&nbsp;</span>
                                                </div>
                                                <input class="form-control" id="umd_in2" placeholder="IN2" style=""
                                                       type="text">
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div style="">
                                    <ul class="list-group list-group-flush">
                                        <li class="list-group-item" style="padding: 0;">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">&nbsp;IN3&nbsp;</span>
                                                </div>
                                                <input class="form-control" id="umd_in3" placeholder="IN3" style=""
                                                       type="text">
                                            </div>
                                        </li>
                                        <li class="list-group-item" style="padding: 0;">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">&nbsp;IN4&nbsp;</span>
                                                </div>
                                                <input class="form-control" id="umd_in4" placeholder="IN4" style=""
                                                       type="text">
                                            </div>
                                        </li>
                                        <li class="list-group-item" style="padding: 0;">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">AUX&nbsp;</span>
                                                </div>
                                                <input class="form-control" id="umd_aux" placeholder="AUX" style=""
                                                       type="text">
                                            </div>
                                        </li>
                                        <li class="list-group-item" style="padding: 0;">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">&nbsp;PAT&nbsp;</span>
                                                </div>
                                                <input class="form-control" id="umd_pat" placeholder="PAT" style=""
                                                       type="text">
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <button class="button-100-round" data-locale="module_key_chroma" id="umd-save"
                                        style="margin: 60px 0 0 10px;">SAVE
                                </button>
                            </div>
                            <div class="invalid-feedback" id="umd-error-message"
                                 style="display: flex; margin-left: 20px; height: 40px;">
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>


            <div style="display: flex; flex-direction: row; justify-content: left; margin-top: 10px;">
                <div style="display: flex; flex-direction: column; align-items: center; ">
                    <fieldset
                            style="border-radius:10px; border: 2px solid var(--frame-color); padding: 0 0 0 10px; color: var(--frame-color); font-weight: bold;">
                        <legend style="width:40%;">Up Stream</legend>
                        <div class="main-sub-box">
                            <button class="button-100-round" data-locale="module_key_chroma" id="luma-on-air"
                                    param="red"
                                    style="width: 80px;">ON
                                AIR
                            </button>
                            <button class="button-100-round" data-locale="module_key_luma" id="chroma-on-air"
                                    param="red"
                                    style="width: 80px;">ON
                                AIR
                            </button>
                            <button class="button-100-round" data-locale="module_key_scene" id="pip1-on-air"
                                    param="red"
                                    style="width: 80px;">ON
                                AIR
                            </button>
                            <button class="button-100-round" data-locale="module_key_scene" id="pip2-on-air"
                                    param="red"
                                    style="width: 80px;">ON
                                AIR
                            </button>
                        </div>
                        <div class="main-sub-box">
                            <button class="button-100-round" data-locale="module_key_chroma" id="luma"
                                    style="width: 80px;">LUMA
                            </button>
                            <button class="button-100-round" data-locale="module_key_luma" id="chroma"
                                    style="width: 80px;">CHROMA
                            </button>
                            <button class="button-100-round" data-locale="module_key_scene" id="pip1"
                                    style="width: 80px;">PIP 1
                            </button>
                            <button class="button-100-round" data-locale="module_key_scene" id="pip2"
                                    style="width: 80px;">PIP 2
                            </button>
                        </div>
                    </fieldset>
                </div>
                <div style="display: flex; flex-direction: column; align-items: center; margin-left: 45px;">
                    <fieldset
                            style="border-radius:10px; border: 2px solid var(--frame-color); padding: 0 0 0 10px; color: var(--frame-color); font-weight: bold;">
                        <legend style="width:70%;">Down Stream</legend>
                        <div class="main-sub-box">
                            <button class="button-100-round" data-locale="module_key_scene" id="dsk-on-air"
                                    param="red" style="width: 80px;">
                                ON
                                AIR
                            </button>
                            <button class="button-100-round" data-locale="module_key_scene" id="logo1-on-air"
                                    param="red"
                                    style="width: 80px;">ON
                                AIR
                            </button>
                            <button class="button-100-round" data-locale="module_key_scene" id="logo2-on-air"
                                    param="red"
                                    style="width: 80px;">ON
                                AIR
                            </button>
                        </div>
                        <div class="main-sub-box">
                            <button class="button-100-round" data-locale="module_key_scene" id="dsk"
                                    style="width: 80px;">DSK
                            </button>
                            <button class="button-100-round" data-locale="module_key_scene" id="logo1"
                                    style="width: 80px;">LOGO 1
                            </button>
                            <button class="button-100-round" data-locale="module_key_scene" id="logo2"
                                    style="width: 80px;">LOGO 2
                            </button>
                        </div>
                    </fieldset>
                </div>
                <div style="width: 28%; display: flex; flex-direction: column; align-items: center; margin-left: 100px;">
                    <fieldset
                            style=" width: 100%; border-radius:10px; border: 2px solid var(--frame-color); padding: 0 0 0 10px; color: var(--frame-color); font-weight: bold;">
                        <legend style="width:40%;">Transition</legend>
                        <div class="main-sub-box">
                            <button class="button-100-round" data-locale="module_key_chroma" id="mix"
                                    style="width: 120px;">MIX
                            </button>
                            <button class="button-100-round" data-locale="module_key_luma" id="wipe"
                                    style="width: 120px;">WIPE
                            </button>
                            <button class="button-100-round" data-locale="module_key_scene" id="dip"
                                    style="width: 120px;">DIP
                            </button>
                        </div>
                        <div class="main-sub-box">
                            <button class="button-100-round" data-locale="module_key_chroma" id="0-5s"
                                    style="width: 120px;">0.5S
                            </button>
                            <button class="button-100-round" data-locale="module_key_luma" id="1-0s"
                                    style="width: 120px;">1.0S
                            </button>
                            <button class="button-100-round" data-locale="module_key_scene" id="custom"
                                    style="width: 120px;">CUSTOM
                            </button>
                        </div>
                    </fieldset>
                </div>
            </div>
            <div style="    display: flex; flex-direction: row; justify-content: left; margin-top: 20px;">
                <div style="width: 55%; display: flex; flex-direction: column;">
                    <div class="main-sub-box" style="">
                        <button class="button-200" data-locale="module_key_chroma" id="pgm-1"
                                param="red">PGM 1
                        </button>
                        <button class="button-200" data-locale="module_key_luma" id="pgm-2"
                                param="red">PGM 2
                        </button>
                        <button class="button-200" data-locale="module_key_scene" id="pgm-3"
                                param="red">PGM 3
                        </button>
                        <button class="button-200" data-locale="module_key_scene" id="pgm-4"
                                param="red" style="">PGM 4
                        </button>
                    </div>
                    <div class="main-sub-box">
                        <button class="button-200" data-locale="module_key_chroma" id="pvw-1"
                                param="green">PVW 1
                        </button>
                        <button class="button-200" data-locale="module_key_luma" id="pvw-2"
                                param="green">PVW 2
                        </button>
                        <button class="button-200" data-locale="module_key_scene" id="pvw-3"
                                param="green">PVW 3
                        </button>
                        <button class="button-200" data-locale="module_key_scene" id="pvw-4"
                                param="green" style="">PVW 4
                        </button>
                    </div>
                </div>
                <div style="width: 26%; display: flex; flex-direction: column; align-items: center; margin-left: 110px;">
                    <div class="main-sub-box">
                        <div style="display: flex; flex-direction: column; align-items: center;">
                            <div class="" style="display: flex; flex-direction: row; justify-content: left;">
                                <button class="button-100-round" data-locale="module_key_chroma" id="pgm-aux"
                                        param="red" style="width: 60px; height: 35px;">AUX
                                </button>
                                <button class="button-100-round" data-locale="module_key_chroma" id="still"
                                        style="width: 60px; height: 35px;">STILL
                                </button>
                                <button class="button-100-round" data-locale="module_key_chroma" id="prev"
                                        style="width: 60px; height: 35px;">PREV
                                </button>
                            </div>
                            <div class="" style="display: flex; flex-direction: row; justify-content: left;">
                                <button class="button-100-round" data-locale="module_key_chroma" id="pgm-pat"
                                        param="red" style="width: 60px; height: 35px;">PAT
                                </button>
                                <button class="button-100-round" data-locale="module_key_chroma" id="grab"
                                        style="width: 60px; height: 35px;">GRAB
                                </button>
                                <button class="button-100-round" data-locale="module_key_chroma" id="bkgd"
                                        style="width: 60px; height: 35px;">BKGD
                                </button>
                            </div>
                        </div>
                        <div class="main-sub-box">
                            <button class="button-200" data-locale="module_key_chroma" id="ftb" param="red"
                                    style="width: 140px;">
                                FTB
                            </button>
                        </div>
                    </div>
                    <div class="main-sub-box">
                        <div style="display: flex; flex-direction: column; align-items: center;">
                            <button class="button-100-round" data-locale="module_key_chroma" id="pvw-aux" param="green"
                                    style="width: 60px; height: 35px;">
                                AUX
                            </button>
                            <button class="button-100-round" data-locale="module_key_chroma" id="pvw-pat" param="green"
                                    style="width: 60px; height: 35px;">
                                PAT
                            </button>
                        </div>
                        <button class="button-200" data-locale="module_key_luma" id="cut" param="red"
                                style="width: 140px; margin-right: 10px;">
                            CUT
                        </button>
                        <button class="button-200" data-locale="module_key_luma" id="auto" param="red"
                                style="width: 140px;">
                            AUTO
                        </button>
                    </div>
                </div>
            </div>

            <div class="transitions_slider">
                <div class="transitions_slider_led" id="transitions_slider_led"></div>
                <div style=" position: absolute; width: 280px; height: 12px; background: var(--item-bg); border-radius: 2px; top: 14px; left: 20px;"></div>
                <input id="putter" max="255" min="0" name="main-transitions" step="1" type="range" value="0"/>
            </div>

            <!--            <div style="display: flex; flex-direction: row; justify-content: left; margin-top: 20px;">-->
            <!--                <div style="width: 60%;">-->
            <!--                    <div class="form-inline">-->
            <!--                        <div class="form-group mb-2">-->
            <!--                        <label class="my-1 mr-2" for="stream_select">Pull Stream</label>-->
            <!--                        <select class="custom-select my-1 mr-sm-2" id="stream_select">-->
            <!--                            <option selected>Choose...</option>-->
            <!--                            <option value="1">1</option>-->
            <!--                            <option value="2">2</option>-->
            <!--                            <option value="3">3</option>-->
            <!--                            <option value="4">4</option>-->
            <!--                            <option value="5">5</option>-->
            <!--                            <option value="6">6</option>-->
            <!--                        </select>-->
            <!--                        </div>-->
            <!--                        <div class="form-group mb-2 w-50">-->
            <!--                            <label class="sr-only" for="pull_stream">Server Address</label>-->
            <!--                            <input class="form-control form-control-sm w-100" id="pull_stream" type="text" placeholder="Stream Url">-->
            <!--                        </div>-->
            <!--                        <div class="form-group mb-2">-->
            <!--                            <button class="button-100-round" data-locale="module_key_chroma" id="pull_stream_save"-->
            <!--                                    style="margin: 0 0 0 30px;">SAVE-->
            <!--                            </button>-->
            <!--                        </div>-->
            <!--                    </div>-->
            <!--                    <div class="form-inline">-->
            <!--                        <div class="form-group mb-2">-->
            <!--                        <label class="my-1 mr-2" for="umd_select">UMD Name</label>-->
            <!--                        <select class="custom-select my-1 mr-sm-2" id="umd_select">-->
            <!--                            <option selected>Choose...</option>-->
            <!--                            <option value="1">PVW</option>-->
            <!--                            <option value="2">PGM</option>-->
            <!--                            <option value="3">IN1</option>-->
            <!--                            <option value="4">IN2</option>-->
            <!--                            <option value="5">IN3</option>-->
            <!--                            <option value="6">IN4</option>-->
            <!--                            <option value="7">AUX</option>-->
            <!--                            <option value="8">PAT</option>-->
            <!--                        </select>-->
            <!--                        </div>-->
            <!--                        <div class="form-group mb-2 w-50">-->
            <!--                            <label class="sr-only" for="umd">UMD Name</label>-->
            <!--                            <input class="form-control w-100" id="umd" type="text" placeholder="UMD Name">-->
            <!--                        </div>-->
            <!--                        <div class="form-group mb-2">-->
            <!--                            <button class="button-100-round" data-locale="module_key_chroma" id="umd_save"-->
            <!--                                    style="margin: 0 0 0 30px;">SAVE-->
            <!--                            </button>-->
            <!--                        </div>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->
        </div>
    </div>
</div>



